* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
}
#file_name {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 10vh;
	border: 1px solid #8C8C8C;
	outline: none;
}
#writer {
	position: absolute;
	top: 10vh;
	bottom: 10vh;
	width: 100vw;
	overflow: auto;
	background: #F7F7F7;
	display: inline;
	white-space:nowrap;
	outline: none;
	border: 0;
}
#writer:focus, #file_name:focus{
	outline: #8C8C8C dotted 2px;
}
#tool {
	position: absolute;
	bottom: 0;
	height: 10vh;
	padding: auto;
}
button {
	border-radius: 3px;
	background: transparent;
	height: 10vh;
	font-size: 3vw;
	border: 0;
	border: 2px solid #E1E1E1;
}
button:active {
	background: #E1E1E1;
}
.mask, .mask-content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.mask {
	display: none;
}
.mask-content {
	margin: 2em 1em;
	border-radius: .5em;
	background: #FFF;
	box-shadow: 0 0 10em -1em #000;
}
.mask-close:before {
	content: 'X';
}
.mask-close {
	position: absolute;
	color: #FF0083;
	right: -1ex;
	top: -1ex;
	height: 1.5em;
	width: 1.5em;
	text-align: center;
	padding: .2em;
	background: #FFF;
	border-radius: 50%;
}